<!-- Author:Rain -->
<template>
  <!-- 一个数据分析报表弹框！！！ -->
  <Statement :images v-model="visible"></Statement>

  <div class="page-box">
    <div class="user-center-wrap">
      <div class="carousel">
        <img :src="`${$main.host}/api/images/assets/男孩.png`" alt="虚拟图像">
        <el-carousel style="position: relative;top:-20px" :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item, index in coll" :key="index">
            <img style="width: 100%;height:100%" :src="$main.host + item" alt="轮播图">
          </el-carousel-item>
        </el-carousel>
        <!-- 侧边小精灵 -->
        <div id="AIshu" style="position:fixed;z-index: 100; top:90px;right: 60px;">
          <el-button @click="analysis" style="position: relative;top:100px">AI生成数据报表</el-button>
        </div>

      </div>
      <!-- 自己要写的内容！！！ -->
      <div class="bottom-content">
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="grid-content ep-bg-purple">
              <h1>累计招聘人数</h1>
              <div class="center">
                <p class="desc">招聘人数</p>
                <p class="number">773</p>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content ep-bg-purple">
              <h1>累计入职申请数</h1>
              <div class="center">
                <p class="desc">累计入职申请数</p>
                <p class="number">445</p>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div id="main1" ref="main1" class="grid-content ep-bg-purple">
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="grid-content gt2 ep-bg-purple" ref="main2" id="main2"></div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content gt2 ep-bg-purple" ref="main3" id="main3"></div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content gt2 ep-bg-purple" ref="main4" id="main4"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="grid-content ep-bg-purple">
              <el-table :data="tableData" style="width: 100%" height="350">
                <el-table-column fixed prop="date" label="Date" width="120" />
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="state" label="阶段情况" width="120" />
                <el-table-column prop="city" label="求职意向" width="260" />
                <el-table-column prop="address" label="求职者基本信息" width="600" />
                <el-table-column prop="zip" label="职位事业群编号" width="200" />
                <el-table-column fixed="right" label="Operations" width="120">
                  <template #default>
                    <el-button link type="primary" size="small">查看简历</el-button>
                    <el-button link type="primary" size="small">操作</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import Statement from "./statement/report-form.vue"
import { getBossHomeData } from "@/api/mock"
import echarts from "@/utils/echarts";
import html2canvas from 'html2canvas';
const main1 = ref() as Ref<HTMLElement>
const main2 = ref() as Ref<HTMLElement>
const main3 = ref() as Ref<HTMLElement>
const main4 = ref() as Ref<HTMLElement>


const img1 = ref("")
const img2 = ref("")
const img3 = ref("")
const img4 = ref("")
const images = reactive([img1, img2, img3, img4])
// 弹框
const visible = ref(false)
//进行分析
function analysis() {
  setTimeout(() => {
    visible.value = true
    const doms: HTMLElement[] = [main1.value, main2.value, main3.value, main4.value]
    //进行一系列的操作
    //1.将图片截图出来放在上面显示，下面先放上一些假的数据
    doms.forEach((item: HTMLElement, index) => {
      let dom = item.querySelector("canvas") as HTMLElement
      html2canvas(dom).then((canvas) => {
        images[index].value = canvas.toDataURL("image/png")
      })
    })
  }, 2000)

  //2.用AI对数据进行数据分析，数据上传显示
}

getBossHomeData().then((data: any) => {
  Object.assign(coll, data.coll)
  Object.assign(tableData, data.tableData)
}).catch(err => {
  console.log(err);
})



//轮播图数据
const coll = reactive([])
const tableData = reactive([])


nextTick(() => {
  var chartDom = document.getElementById('main1');
  var myChart = echarts.init(chartDom);
  var option;

  // 折线图
  option = {
    title: {
      text: '岗位投递趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Web前端开发', 'UI设计', 'JAVA后端', '产品', '鸿蒙开发']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['4-03', '4-04', '4-05', '4-06', '4-07', '4-08', '4-09']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Web前端开发',
        type: 'line',
        stack: 'Total',
        data: [50, 100, 30, 33, 22, 5, 2]
      },
      {
        name: 'UI设计',
        type: 'line',
        stack: 'Total',
        data: [23, 10, 45, 23, 12, 3, 6]
      },
      {
        name: 'JAVA后端',
        type: 'line',
        stack: 'Total',
        data: [40, 80, 23, 13, 22, 52, 22]
      },
      {
        name: '产品',
        type: 'line',
        stack: 'Total',
        data: [0, 10, 23, 63, 12, 12, 32]
      },
      {
        name: '鸿蒙开发',
        type: 'line',
        stack: 'Total',
        data: [20, 30, 23, 33, 22, 12, 82]
      }
    ]
  };
  option && myChart.setOption(option);

  // 阶段通过情况
  let option2 = {
    title: {
      text: '阶段通过情况'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: ['申请数', '申请通过数', '面试通过数', '候选人入职'],
      orient: 'vertical',
      left: 'left',
      top: 'bottom'
    },
    series: [
      {
        name: '状态',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 10, name: '候选人入职' },
          { value: 15, name: '面试通过数' },
          { value: 80, name: '申请通过数' },
          { value: 100, name: '申请数' }
        ]
      }
    ]
  };

  var chartDom2 = document.getElementById('main2');
  var myChart2 = echarts.init(chartDom2);
  option2 && myChart2.setOption(option2);


  let option3 = {
    title: {
      text: '候选人工作年限分布',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'bottom'
    },
    series: [
      {
        name: '工作年限',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 2, name: '>10' },
          { value: 3, name: '8-10' },
          { value: 12, name: '5-8' },
          { value: 30, name: '3-5' },
          { value: 33, name: '2-3' },
          { value: 22, name: '1' },
          { value: 7, name: '其他' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };


  var chartDom3 = document.getElementById('main3');
  var myChart3 = echarts.init(chartDom3);
  option3 && myChart3.setOption(option3);


  /* 渠道质量 */
  let option4 = {
    title: {
      text: '渠道质量 ',
      // subtext: ' in'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['校园招聘', '系统推荐', '企业官网', '猎头', '线下招聘会', '内推', '其他'],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  };

  var chartDom4 = document.getElementById('main4');
  var myChart4 = echarts.init(chartDom4);
  option4 && myChart4.setOption(option4);



})
</script>

<style scoped lang="less">
@import "@/assets/global.less";

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80px;

  p {
    padding: 20px;
    font-size: 18px;
    font-weight: 600;
  }
}

#AIshu {
  height: 160px;
  background: url('@{host}/api/images/assets/机器人.png');
  background-size: cover;
  background-position-x: -16px;
}

.page-box {
  background: url(@backgroundIMG) no-repeat;
  background-size: 100% auto;
  width: 100%;
  background-attachment: fixed;
}

.user-center-wrap {
  margin: 0 auto;
  padding-bottom: 0px;
  padding-top: 60px;
  width: 1200px;

  .bottom-content {
    width: 100%;
    // background-color: rgba(0, 0, 0, .1);
    margin-bottom: 50px;
  }

  .carousel {
    position: relative;
    padding: 0 200px;

    img {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 240px;
    }
  }
}

/* layout面板 */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 220px;
  padding: 10px 0;
  position: relative;
  box-shadow: 2px 4px 8px 0px RGB(177, 125, 184);

  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;

    .desc {
      color: rgba(0, 0, 0, .5);
      font-size: 14px;
    }

    .number {
      margin-top: 20px;
      font-size: 30px;
    }
  }

  h1 {
    font-size: 19px;
    color: RGBA(70, 70, 70, 0.9);
    font-weight: 600;
    position: absolute;
    top: 10px;
    left: 5px;
  }
}

.gt2 {
  min-height: 300px;
}

.ep-bg-purple {
  background-color: #FFF;
}



/* elementplus */
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>